import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Platform } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Constants from "expo-constants";
const platform = Constants.platform;
import { AntDesign } from "@expo/vector-icons";
import BaseStyles from "@constants/BaseStyles";
const baseStyles = BaseStyles();

const CustomHeader = ({
    title,
    onBackPress,
    rightComponent,
    iosHeaderShown = false,
}: {
    title: string;
    onBackPress: () => void;
    rightComponent?: React.ReactElement | null;
    iosHeaderShown: boolean;
}) => {
    const insets = useSafeAreaInsets();

    // const { title, onBackPress, rightComponent } = props;
    // 是否是ios modals
    const iosModal = iosHeaderShown && platform && platform.ios;
    return (
        <View style={[styles.header, { paddingTop: iosModal ? 0 : insets.top }]}>
            <View style={styles.betweenBox}>
                {iosModal ? (
                    <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
                        {/* <AntDesign name="arrowleft" size={22} color="black" /> */}
                        <AntDesign name="close" size={22} color="black" />
                    </TouchableOpacity>
                ) : (
                    <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
                        <AntDesign name="arrowleft" size={22} color="black" />
                    </TouchableOpacity>
                )}
            </View>
            <View style={{ flex: 1 }}>
                <Text style={styles.title}>{title}</Text>
            </View>
            <View style={[styles.betweenBox]}>{rightComponent}</View>
        </View>
    );
};

const styles = StyleSheet.create({
    header: {
        backgroundColor: "#ccc",
        ...baseStyles.justifyBetween,
        paddingHorizontal: 16,
        ...Platform.select({
            ios: {
                height: 44, // 在 iOS 上的样式
            },
            android: {
                height: 88, // 在 Android 上的样式
            },
        }),
    },
    title: {
        fontSize: 20,
        fontWeight: "bold",
        textAlign: "center",
    },
    backButton: {
        // Styling for the back button
    },
    betweenBox: {
        width: "25%",
    },
    textRight: {
        textAlign: "right",
    },
});

export default CustomHeader;
